<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <span v-if="isUpdate">工号：<input disabled type="text" v-model="id"><br></span>
    姓名：<input type="text" v-model="name"><br>
    性别：<input type="text" v-model="gender"><br>
    生日：<input type="date" v-model=" birthday"><br>
    婚姻状态：<input type="text" v-model="wedlock"><br>
    <input @click="operateEmployee" type="button" value="提交">
</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            id: '',
            name: '',
            gender: '',
            birthday: '',
            wedlock: '',
            isUpdate: false
        },
        mounted() {
            // window.location.href 属性返回当前页面的 URL。
            let url = decodeURI(window.location.href); // 对获取url的url进行解码   decodeURI()函数可对encodeURI()函数编码过的 URI 进行解码。
            let urlParam = url.split("?id=");  // 获取url携带的参数
            if (undefined != urlParam[1]) {
                console.log(urlParam[1])
                this.isUpdate = true
                this.id = JSON.parse(urlParam[1])
                this.init()
            }
        },
        methods: {
            init() {
                axios.get("http://localhost:80/getEmployeeById?id=" + this.id).then(response => {
                    console.log(response)
                    let data = response.data
                    this.name = data.name
                    this.gender = data.gender
                    this.birthday = data.birthday
                    this.wedlock = data.wedlock
                })
            },
            operateEmployee() {
                let employee = {
                    id: this.id,
                    name: this.name,
                    gender: this.gender,
                    birthday: this.birthday,
                    wedlock: this.wedlock,
                }
                if (this.isUpdate) {
                    axios.post("http://localhost:80/updateEmployee", employee).then(response => {
                        let data = response.data
                        alert(data.msg)
                        if (data.flag) {
                            window.location.href = "employeeList.html"
                        }

                    })
                } else {
                    axios.post("http://localhost:80/addEmployee", {employee}).then(response => {
                        let data = response.data
                        alert(data.msg)
                        if (data.flag) {
                            window.location.href = "employeeList.html"
                        }
                    })
                }

            }
        }
    })
</script>
</body>
</html>